<template>
  <div class="nav_bar">
    <div class="logo">
      <img src="@/assets/logo.png" alt="logo" @click="$router.push('/')" />
    </div>
    <div>
      <p>
        <van-icon name="search" class="search_icon" />
        <span>请输入内容</span>
      </p>
    </div>
    <div>
      <img
        v-if="userModel.user_img"
        :src="userModel.user_img"
        alt=""
        style="border-radius: 5.556vw"
        @click="$router.push('/edit')"
      />
      <p>下载APP</p>
    </div>
  </div>
</template>

<script>
import { getInfo } from "@/utils/Api.js";
export default {
  data() {
    return {
      userModel: {},
    };
  },
  methods: {
    async userInfoData() {
      const INFO = await getInfo(
        "/user/" + JSON.parse(localStorage.getItem("id"))
      );
      this.userModel = INFO.data[0];
      // console.log("usermodel", this.userModel);
    },
  },
  created() {
    if (JSON.parse(localStorage.getItem("token"))) {
      this.userInfoData();
    }
  },
};
</script>

<style lang="less" scoped>
.nav_bar {
  height: 12.5vw;
  background: white;
  display: flex;
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30.556vw;
    img {
      width: 70%;
    }
  }
  div:nth-of-type(2) {
    flex: 1;
    display: flex;
    align-items: center;
    p {
      padding: 1.389vw 2.778vw;
      width: 80%;
      border-radius: 1.111vw;
      background: #f4f4f4;
      display: flex;
      align-items: center;
      .search_icon {
        font-size: 4.444vw;
      }
      span {
        color: #666;
        font-size: 3.333vw;
        padding-bottom: 0.556vw;
      }
    }
  }
  div:nth-of-type(3) {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 6.667vw;
      height: 6.667vw;
    }
    p {
      padding: 1.389vw 2.778vw;
      background: #ff9db5;
      color: white;
      font-size: 3.611vw;
      margin: 0 1.389vw;
      border-radius: 0.833vw;
    }
  }
}
</style>